<template>
	<div class="myhome">
		<div class="div1">
			<div class="img">
				<img v-show="$store.state.img!=''" :src="`${this.$ip}/api/public/showimg/${$store.state.img}`"/>
				<img v-show="$store.state.img==''" src="../../assets/img/mobile/user-logo-004.png"/>
			</div>
			<aside v-if="$store.state.role==''">
				<router-link to="/mobile/login"><h3 >登录/注册</h3></router-link>
			</aside>
			<aside v-if="$store.state.role!=''">
				<h3>{{$store.state.name}}</h3>
				<span>积分:107</span>
			</aside>
			<div class="setting">
				<router-link to="/mobile/usersetting"><i class="el-icon-setting"></i></router-link>
			</div>
		</div>
		<div class="div2">
			<ul>
				<li>
					<router-link to="/mobile/myorders"><i class="el-icon-document"></i></router-link>
					<p>我的订单</p>
				</li>
				<li>
					<router-link to="/mobile/myshopping">
						<i class="el-icon-shopping-cart-2"></i>
					</router-link>
					<p>我的购物车</p>
				</li>
				<li>
					<router-link to="/mobile/myfavorites">
						<i class="el-icon-star-off"></i>
					</router-link>
					<p>我的收藏</p>
				</li>
			</ul>
		</div>
		<div class="div3">
			<MobileHomeCarousel :proplist="list"></MobileHomeCarousel>
			<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
		</div>
	</div>
</template>

<script>
import MobileHomeCarousel from '@/view/mobile/home/MobileHomeCarousel.vue'
import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue'
export default {
	name:'MyHome',
	components:{
		MobileHomeCarousel,MobileHomeList
	},
	data(){
		return{
			list:[],
			newslist:[],
		}
	},
	methods:{
		gologin(){
			this.$router.push({path:'/mobile/login'});
		}
	},
	mounted(){
		// 轮播图/热门推荐
		this.$get("/api/public/findHot/1/5").then((resp)=>{
			this.list =resp.data.data;
			console.log(this.list);
		})
		//新书上市
		this.$get("/api/public/findPageBook/1/12/0").then((resp)=>{
			this.newslist =resp.data.data.books;
			console.log(this.newslist);
		})
	}
}
</script>

<style scoped>
.myhome{
	width: 100%;
	background-color: #f5d5a0;
}
.myhome .div1{
	width: 100%;
	margin: 0 auto;
	line-height: 14rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 2rem;
}
.myhome .div1 a{
	color: #535353;
	font-size: 2rem;
	margin-left: 2.5rem;
}
.myhome .div1 .img{
	width: 5rem;
	height: 5rem;
	margin-left: 1.25rem;
	display: flex;
	align-items: center;
}
.myhome .div1 img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.myhome .div1 aside{
	width: 50%;
	line-height: 2rem;
	margin-left: 1.25rem;
	color: #535353;
}
.myhome .div1 aside h3{
	font-size: 1rem;
}
.myhome .div1 aside span{
	font-size: 15px;
}
.myhome .div2{
	width: 100%;
	background-color: white;
	margin: 0 auto;
}
.myhome .div2 ul{
	width: 100%;
	height: 7rem;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border: 1px solid #cbcbcb;
}
.myhome .div2 li i{
	font-size: 2.5rem;
	margin-left: 0.625rem;
	color: black;
	margin: 0.5rem;
}
.myhome .div2 li{
	font-size: 1rem;
	align-items: center;
	margin-bottom: 0.625rem;
}
.myhome .login{
	width: 100%;
	line-height: 10rem;
	text-align: center;
	margin-top: 2.5rem;
}
.myhome .login button{
	color: white;
	width: 5rem;
	line-height: 2rem;
	border: none;
	border-radius: 0.1rem;
	background-color: #a68b5b;
}
</style>
